<script setup lang="ts">
import { ref } from "vue";
import Search from "@iconify-icons/ep/search";
//import Refresh from "@iconify-icons/ep/refresh";
import addICO from "@iconify-icons/ep/circle-plus";
//import editICO from "@iconify-icons/ep/edit";
import delICO from "@iconify-icons/ep/delete";

import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { PureTableBar } from "@/components/RePureTableBar"; // 导入表格
import { useDataList } from "./utils/hooks";
import { useRouter } from "vue-router";

import { useURLStoreHook } from "@/store/modules/proxy";

const pureT = ref();
const formRef = ref();
const tableRef = ref();
const delIDS = ref("");
const router = useRouter();
const useURL = useURLStoreHook();
//const imgCnt = 0;

const {
  onSearch,
  dataList,
  loading,
  columns,
  isData,
  pagination,
  handleCurrentChange,
  handleSizeChange,
  handleDelData,
  handleOpenData,
  ctrButton,
  funList,
  filterList,
  form,
  onbatchDel,
  exeFormFun,
  getImage,
  ImportAndExpoertData,
  fileOnChange,
  fileOnChangeExcle,
  fileList,
  fileUpload,
  fileUploadExl,
  editCode
} = useDataList(tableRef);

//console.log("ctrButton", ctrButton);
const singDelData = (row, falg) => {
  delIDS.value = row.id;
  //1表示删除，2表示修改
  if (falg == 1) {
    handleDelData(delIDS.value);
  } else {
    handleOpenData(delIDS.value, falg); //2表示修改
  }
};
const goToPage = (row, falg) => {
  /*
  router.push({
    path: "/proxyEdit/index",
    query: {
      id: row.id,
      tableName: form.appName
    }
  });
  */
  useURL.setURL({ id: row.id, tableName: form.appName, isEdit: falg });
  router.push({
    path: "/proxyEdit/index"
  });
};
</script>
<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
    >
      <el-form-item v-for="(item, key) in filterList" :key="key">
        <el-select
          :placeholder="item.filterField"
          clearable
          v-model="item.filterValue"
          class="!w-[150px]"
        >
          <el-option
            :label="subitem"
            :value="subitem"
            v-for="(subitem, subkey) in item.filterValues"
            :key="subkey"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="form.searchKey"
          placeholder="输入查询关键字"
          clearable
          class="input-with-select"
        >
          <template #append>
            <el-button :icon="useRenderIcon(Search)" @click="onSearch" />
          </template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon(addICO)"
          v-if="ctrButton.isAdd"
          @click="handleOpenData(0, 1)"
          >添加</el-button
        >
        <el-popconfirm
          title="是否确认删除?"
          @confirm="onbatchDel(true, '')"
          v-if="ctrButton.isDel"
        >
          <template #reference>
            <el-button type="danger" :icon="useRenderIcon(delICO)">
              删除
            </el-button>
          </template>
        </el-popconfirm>

        <el-button
          type="info"
          :icon="useRenderIcon(addICO)"
          v-if="ctrButton.isExport"
          @click="ImportAndExpoertData(2)"
          >导出</el-button
        >

        <el-upload
          ref="fileUploadExl"
          action="#"
          :file-list="fileList"
          :on-change="fileOnChangeExcle"
          :auto-upload="false"
          v-if="ctrButton.isUploadExl"
        >
          <el-button
            type="info"
            :icon="useRenderIcon(addICO)"
            style="margin-top: 12px; margin-left: 10px"
            >导入Ex</el-button
          >
        </el-upload>

        <el-upload
          ref="fileUpload"
          action="#"
          :file-list="fileList"
          :on-change="fileOnChange"
          :auto-upload="false"
          v-if="ctrButton.isImport"
        >
          <el-button
            type="info"
            :icon="useRenderIcon(addICO)"
            style="margin-top: 12px; margin-left: 10px"
            >导入</el-button
          >
        </el-upload>

        <el-button
          v-for="(item, key) in funList"
          type="success"
          :icon="useRenderIcon(item.funIcon)"
          :key="key"
          @click="exeFormFun(0, item)"
          >{{ item.funName }}</el-button
        >
      </el-form-item>
    </el-form>
    <PureTableBar
      ref="pureT"
      :title="form.appName"
      :columns="columns"
      :tableRef="tableRef?.getTableRef()"
      @refresh="onSearch"
      v-if="isData"
    >
      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          ref="tableRef"
          row-key="id"
          :columns="dynamicColumns"
          :data="dataList"
          :size="size"
          :isExpandAll="false"
          table-layout="auto"
          :loading="loading"
          :paginationSmall="size === 'small' ? true : false"
          :pagination="pagination"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
        >
          <template #operation="{ row }">
            <el-popconfirm
              title="是否确认删除?"
              @confirm="onbatchDel(false, row.id)"
              v-if="ctrButton.isDel && row.stateCode < 100"
            >
              <template #reference>
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  :size="size"
                  :icon="useRenderIcon(delICO)"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>

            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              @click="singDelData(row, 2)"
              v-if="ctrButton.isUpdate && row.stateCode < 100"
            >
              编辑
            </el-button>
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              @click="goToPage(row, true)"
              v-if="ctrButton.isProxyData"
            >
              填报数据
            </el-button>

            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              @click="singDelData(row, 2)"
              v-if="ctrButton.isSheng && editCode != row.stateCode"
            >
              编审
            </el-button>
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              @click="singDelData(row, 5)"
              v-if="
                (row.stateCode != '' && !ctrButton.isSheng) ||
                (editCode == row.stateCode && !ctrButton.isUpdate)
              "
            >
              详情
            </el-button>
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              @click="goToPage(row, false)"
              v-if="!ctrButton.isProxyData"
            >
              填报详情
            </el-button>
          </template>
          <template #image="{ column, row }">
            <el-image
              v-for="(item, key) in row[column.label]"
              :key="key"
              :src="item.url"
            />
          </template>

          <template #file="{ column, row }">
            <template v-for="(item, key) in row[column.label]" :key="key">
              <video width="180" controls v-if="getImage(item.url)">
                <source :src="item.url" type="video/mp4" />
              </video>

              <el-link :href="item.url" type="danger" target="_blank" v-else
                >文件下载</el-link
              >
            </template>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
</template>

<style scoped lang="scss">
.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
./utils/hooks.tsx
